<template>
  <div class="login">
    <div class="login-icon">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-wangyiyunyinle"></use>
      </svg>
    </div>
    <div class="login-panel">
      <van-tabs v-model="activeName">
        <van-tab title="手机登录" name="phone">
          <van-form @submit="onSubmit">
            <van-field
              v-model="phone"
              name="用户名"
              label="手机号"
              placeholder="用户名"
              ref="uphone"
              :rules="rules.phone"
            />
            <van-field
              v-model="password"
              type="password"
              name="密码"
              label="密码"
              placeholder="密码"
              ref="pwd"
              :rules="rules.password"
            />
            <div class="login-btn">
              <van-button block native-type="submit">提交</van-button>
            </div>
          </van-form>
        </van-tab>
        <van-tab title="邮箱登录" name="Verification-Code">
          <van-form @submit="onSubmit">
            <van-field
              v-model="account"
              name="邮箱"
              label="邮箱账号"
              placeholder="邮箱账号"
              ref="ephone"
            />
            <van-field
              v-model="emailpwd"
              type="password"
              name="密码"
              label="邮箱密码"
              placeholder="密码"
              ref="epwd"
            />
            <div class="login-btn">
              <van-button block native-type="submit">登录</van-button>
            </div>
          </van-form>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
  import { getLoginInfo,getUserDetail } from '../../api/login'
  import Bus from '../../common/js/bus'
  import { mapMutations } from 'vuex';
  import { Toast,Notify } from 'vant'

  export default {
    data() {
      return {
        phone:'',
        password:'',
        imageUrl:'',
        loginTxt:'立即登录 >',
        userId:'',
        isLogin: false,
        rules:{
          phone:[ 
            { require: true, message: '请填写手机号' },
            { pattern: /^1[34578]\d{9}$/, message: '请填写正确的手机号' }
          ],
          password: [
            { require: true,message: '请输入密码' },
            { pattern: /^[A-Z0-9]{3,}$/,  message: '密码必须是3位以上的字母或者数字' }
          ]
        },
        activeName:'phone',
        account:'',
        emailpwd:'',
        currentIndex:0,
      }
    },

    mounted:function(){
      let cookie = this.$session.getItem('cookie');
      // console.log(cookie);
      if(cookie){
        Toast.success('登录成功');
        this.$router.push({ path:'/findPage' });
        this.$session.getItem('currentIndex');
      }else{
        this.$session.clear();
      }
    },

    methods:{
      onSubmit(){
        this.phone = this.$refs.uphone.value;
        this.password = this.$refs.pwd.value;
        getLoginInfo(this.phone, this.password).then((res) => {
          console.log(res);
          this.$session.setItem('phone', this.phone);
          this.$session.setItem('password', this.password);
          this.$session.setItem('cookie', res.cookie);
          this.$session.setItem('profile', res.profile);
        })
        .catch((error) => {
          console.log(error);
        })
        this.$router.push({ path: '/findPage' });
        this.currentIndex = 0;
        this.$session.setItem('currentIndex',this.currentIndex);
      },
    }
  }
</script>

<style scoped>
.login{
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  height: 667px;
  width: 100%;
  background: rgb(212, 68, 57);
}

.login-icon{
  padding-top: 90px;
  padding-bottom: 20px;
}

.icon{
  width: 100px;
  height: 100px;
  color: #fff;
  background: red;
  border-radius: 100%;
}

.login-panel button{
  background-color:  rgb(212, 68, 57);
  color:#fff;
  margin-top: 20px;
}
</style>